<template>
  <view class="style-container" :style="{ backgroundImage: 'url(' + srcBgTop + ')' }">
    <view :style="{ height: titleBarMarginTop }"></view>
    <view class="styleTopContainer">
      <view class="styleTitleContainer">
        <view class="styleTitleLeft">
          <image class="styleGoBack" :src="srcGoBack" @click="clickBack" v-if="pagesLength >= 2"></image>
          <image class="styleGoBack" :src="srcGoHome" @click="clickHome" v-else></image>
        </view>
        <view class="styleTitleCenter">
          <span class="styleTitleContent">我的权益</span>
        </view>
        <view class="styleTitleRight"></view>
      </view>
    </view>

    <view class="style-bg-middle" :style="'top:' + middleTop + ';height:' + middleBgHeight"></view>
    <view class="style-bg-bottom"></view>

    <view class="card-box" :style="'top:' + navHeight + 'rpx;'">
      <view :class="{ card: true, changeBg: data.cardType == 1 }">
        <view class="card-header">
          <view class="card-header-left">
            <!-- <image :src="serviceText" class="card-title"></image> -->
          </view>
          <view class="card-header-right">
            有效期至 {{ data.expireTime && data.expireTime.slice(0, 10) }}
          </view>
        </view>
        <view :class="{ 'card-info': true }">
          <view class="left">
            <u-image :src="userInfo.pic || defaultAvatar" width="78rpx" height="78rpx" border-radius="50%"></u-image>
          </view>
          <view class="middle">
            <text v-if="data.personName">姓名：{{ data.personName }}</text>
            <text v-if="data.stuNum">学号：{{ data.stuNum }}</text>
            <text v-if="data.cardNo">卡号：{{ data.cardNo }}</text>
            <text v-if="data.info.college">院校：{{ data.info.college }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="style-item-container" :style="{ height: contentHeight }">
      <scroll-view class="styleScrollView" scroll-y="true" @scrolltoupper="onRefresh" @scrolltolower="onLoadMore"
        @scroll="onScroll" :upper-threshold="50" :lower-threshold="50" :style="{ height: contentTextHeight }">
        <view class="style-item" v-for="(item, index) in rightsList" :key="index">
          <template v-if="data.cardVersion!=1">
            <view class="style-item-title">
              <view class="style-item-title-left">
                <view class="style-item-line" :style="{ background: item.lineBgColor }"></view>
                <view class="style-item-title-text">{{ item.rightName }}</view>
              </view>
              <view class="style-number">{{ item.myRightCount }}<span v-if="item.myRightCount">次</span></view>
            </view>

            <view class="style-item-content">{{ item.myRightDesc }}</view>
          </template>
          <template v-else>
            <template v-if="item.cardType&&item.cardType.includes(data.cardType)">
              <view class="style-item-title">
                <view class="style-item-title-left">
                  <view class="style-item-line" :style="{ background: item.lineBgColor }"></view>
                  <view class="style-item-title-text">{{ item.rightName }}</view>
                </view>
                <view class="style-number">{{ item.myRightCount }}<span v-if="item.myRightCount">次</span></view>
              </view>
            </template>
            <view class="style-item-content">{{ item.myRightDesc }}</view>
          </template>
        </view>
        <view class="tips">
          顾问服务时间为工作日 上午 9:30-11:30 下午 14:00-17:00
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import {
  getPersonDetail,
  myRights,
  getCareerPathMyInfo,
} from "@/api/modules/career";
export default {
  data() {
    return {
      titleText: "",
      navHeight: 0,
      list: [
        {
          lineBgColor: "#3BC336",
          rightName: "人才就业市场竞争力分析",
          myRightDesc: "从容面对就业市场，找到最适合自己的定位。",
          myRightCount: "1",
          cardType: [1, 5],
        },
        {
          lineBgColor: "#B071E4",
          rightName: "简历诊断",
          myRightDesc:
            "根据学生提供的简历，帮助同学们打造出一份满足职场需求的简历，在就业市场中步步领先。",
          myRightCount: "1",
          cardType: [1, 2, 4, 5],
        },
        {
          lineBgColor: "#0BBAB8",
          rightName: "职业测评",
          myRightDesc: "深度了解自己，明确职业方向，提供有力参考。",
          myRightCount: "1",
          cardType: [1, 2, 3, 5],
        },
        {
          lineBgColor: "#6982EF",
          rightName: "性格测试",
          myRightDesc: "挖掘自身潜能，增强团队影响力，更好的处理人际关系。",
          myRightCount: "1",
          cardType: [1, 2, 5],
        },
        {
          lineBgColor: "#EB7078",
          rightName: "职途报告",
          myRightDesc: "挖掘自身潜能，增强团队影响力，更好的处理人际关系。",
          myRightCount: "1",
          cardType: [1, 5],
        },
        {
          lineBgColor: "#E98751",
          rightName: "添翼训练营",
          myRightDesc:
            "通过线下开展训练营的方式，培养职场沟通技巧、时间管理与工作效率、人际关系与团队合作、创造力与创新、自我管理与情绪调控、职业道德与职业素养等。",
          myRightCount: "4",
          cardType: [1, 5],
        },
        {
          lineBgColor: "#C15BE3",
          rightName: "推荐职业",
          myRightDesc:
            "基于大数据算法，结合同学们的专业、兴趣和能力，智能推荐适合的职业。",
          myRightCount: "",
          cardType: [1, 5],
        },
        {
          lineBgColor: "#48BEBC",
          rightName: "职业顾问1v1辅导",
          myRightDesc:
            "平台遴选对口职业顾问与学生“结对子”1对1进行长期服务，线下定期服务，线上随时咨询，咨询内容涵盖：自我评估、职业研究、职业规划、求职技巧、职业转型、职业发展技能、职业满意度等维度。",
          myRightCount: "",
          cardType: [1, 5],
        },
      ],
      rightsList: [],
      srcBgTop: this.$imgBaseSelf + "careerPath/career_path_my_rights_top.png",
      srcBgBottom:
        this.$imgBaseSelf + "careerPath/career_path_my_rights_bottom.png",
      srcBg: this.$imgBaseSelf + "careerPath/career_path_my_rights_top.png",
      srcGoBack:
        this.$imgBaseSelf + "career/positionDictionary/major_go_back.webp",
      srcGoHome: this.$imgBaseSelf + "home-b.png",
      pagesLength: 0,
      titleBarMarginTop: 0,
      contentHeight: 0,
      contentTextHeight: 0,
      middleTop: 0,
      middleBgHeight: 0,
      serviceText: this.$imgBase + "careerPath/serviceTextNew.png",
      defaultAvatar: this.$imgBase + "common/avatar_default.png",
      data: {
        expireTime: "",
        personName: "",
        stuNum: "",
        createTime: "2023-09-21 10:22:05",
        personId: "123456",
        updateTime: "2023-09-21 10:26:35",
        cardNo: "",
        info: -{
          college: "深圳职业技术大学",
        },
        cardType: 2,
      },
      isShowBottomBlank: false,
      screenHeight: 0,
      userInfo: {},
    };
  },
  onShow() {
    this.getPersonDetail();
  },
  created() {
    this.pagesLength = getCurrentPages().length;
    this.getMyRights();
  },
  methods: {
    getUserRightsListFn() {
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      myRights({ cardType: this.data.cardType }).then((res) => {
        if (res.code == 200) {
          this.rightsList = res.data;
        }
        uni.hideLoading();
      });
    },
    getMyRights() {
      let params = {};
      getCareerPathMyInfo(params).then((res) => {
        if (res.code == 200) {
          this.data = res.data;
          if (res.data.cardVersion == "1") {
            this.rightsList = this.list;
          } else {
            this.getUserRightsListFn();
          }
        }
      });
    },
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + "px";
      const screenHeight = res.windowHeight;
      this.screenHeight = screenHeight;
      // this.contentHeight =
      //     screenHeight - uni.upx2px(196 + 146 + 100) - this.statusBarHeight + "px";
      this.contentHeight =
        screenHeight - uni.upx2px(298 + 118) - this.statusBarHeight + "px";
      // this.contentTextHeight = screenHeight - uni.upx2px(196 + 146 + 100 + 70) - this.statusBarHeight + "px";
      this.contentTextHeight =
        screenHeight - uni.upx2px(298 + 88 + 100) - this.statusBarHeight + "px";

      this.middleBgHeight = screenHeight - uni.upx2px(750) + "px";
      this.middleTop = uni.upx2px(550) + "px";
    },
    getPersonDetail(update) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: this.personId,
          }),
          where: "",
          slaveInfo: 1,
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf("img.job1001.com/myUpload/pic.gif") >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
    clickBack() {
      uni.navigateBack();
    },
    clickHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    onRefresh() {
      this.isShowBottomBlank = false;
    },
    onLoadMore() {
      this.isShowBottomBlank = true;
    },
    onScroll(event) {},
  },
  mounted() {
    this.getStatusBarHeight();
  },
};
</script>
<style lang="scss" scoped>
.style-container {
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
  height: 100vh;

  .styleTopContainer {
    .styleTitleContainer {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .styleTitleLeft {
        flex: 1;

        .styleGoBack {
          width: 44rpx;
          height: 44rpx;
          margin-left: 32rpx;
        }
      }

      .styleTitleCenter {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .styleTitleContent {
          font-weight: 800;
          color: #222222;
          line-height: 44rpx;
          font-size: 32rpx;
        }
      }

      .styleTitleRight {
        flex: 1;
      }
    }
  }

  .card-box {
    margin: 0rpx 32rpx 32rpx 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;

    .card {
      width: 688rpx;
      height: 266rpx;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url($img-base + "careerPath/zhituCardWithTitle_new.png");

      &-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx 0 24rpx;
        height: 48rpx;

        &-left {
          .card-title {
            width: 163rpx;
            height: 26rpx;
          }
        }

        &-right {
          font-size: 24rpx;
          color: #2ba03a;
        }
      }

      &-info {
        width: 100%;
        height: calc(100% - 48rpx);
        display: flex;
        align-items: center;
        padding: 0 12rpx 0 32rpx;

        .left {
          padding: 0 32rpx;
        }

        .middle {
          display: flex;
          flex-direction: column;
          margin-left: 12rpx;

          text {
            color: #fff;
            font-size: 28rpx;
            padding: 8rpx 0;
          }
        }

        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          font-size: 30rpx;
          width: 258rpx;
          height: 86rpx;
          background-repeat: no-repeat;
          background-size: cover;
          border-radius: 30rpx;
          overflow: hidden;
          padding: 0px 48rpx;

          .arrow {
            width: 23rpx;
            height: 16rpx;
            flex-shrink: 0;
            padding-top: 6rpx;
          }
        }
      }
    }
    .changeBg {
      background-image: url($img-base + "careerPath/titleCard_new.png");
    }
  }

  .style-item-container {
    margin-left: 32rpx;
    margin-top: 15rpx;
    margin-right: 32rpx;
    background: linear-gradient(0deg, #f1ffef 0%, #ffffff 100%);
    border-radius: 10rpx 10rpx 0rpx 10rpx;
    padding: 30rpx 36rpx 41rpx 36rpx;
    margin-bottom: 32rpx;
    position: relative;

    .styleScrollView {
      .style-item {
        display: flex;
        flex-direction: column;

        .style-item-title {
          display: flex;
          justify-content: space-between;

          .style-item-title-left {
            display: flex;
            direction: row;
            align-items: center;

            .style-item-line {
              width: 6rpx;
              height: 28rpx;
              border-radius: 3rpx;
              background-color: #318b2e;
            }

            .style-item-title-text {
              margin-left: 16rpx;
              font-size: 28rpx;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #333333;
            }
          }

          .style-number {
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #318b2e;
          }
        }

        .style-item-content {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #707b5f;
          line-height: 46rpx;
          margin-top: 31rpx;
          margin-bottom: 61rpx;
        }
      }
    }
  }

  .style-bottom-blank {
    height: 70rpx;
  }

  .style-bg-top {
    position: fixed;
    width: 100%;
    height: 500rpx;
    top: 0;
    background-image: url($img-base + "careerPath/career_path_my_rights_top.png");
    background-size: 100% 100%;
  }

  .style-bg-middle {
    position: fixed;
    width: 100%;
    height: 500rpx;
    top: 500;
    background-color: #ffffff;
    background-size: 100% 100%;
  }

  .style-bg-bottom {
    position: fixed;
    width: 100%;
    height: 250rpx;
    bottom: 0;
    background-image: url($img-base + "careerPath/career_path_my_rights_bottom.png");
    background-size: 100% 100%;
  }
  .tips {
    color: #f19494;
  }
}
</style>
